<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* The device with borders */
        .smartphone {
            position: relative;
            width: 360px;
            height: 640px;
            margin: auto;
            border: 16px black solid;
            border-radius: 36px;
            border-top-width: 60px;
            border-bottom-width: 60px;
        }

        /*   手机听筒    */
        .smartphone:before {
            content: '';
            display: block;
            width: 60px;
            height: 5px;
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #333;
            border-radius: 10px;
        }

        /*    手机 home 键    */
        .smartphone:after {
            content: '';
            display: block;
            width: 35px;
            height: 35px;
            position: absolute;
            left: 50%;
            bottom: -65px;
            transform: translate(-50%, -50%);
            background: #333;
            border-radius: 50%;
        }

        /* The screen (or content) of the device */
        .smartphone .content {
            width: 360px;
            height: 640px;
            background: greenyellow;
        }
    </style>
</head>

<body>




    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">   

        必知必会 
        
        重点代码:

        border-top-width: 60px;
        border-bottom-width: 60px;  ( 听筒 + home 键 )

        <div class="smartphone">
            <div class="content">
                <iframe src="https://jd.com/" style="width:100%;border:none;height:100%" >
            </div>
        </div>

        .smartphone {
            position: relative;
            width: 360px;
            height: 640px;
            margin: auto;
            border: 16px black solid;
            border-radius: 36px;
            border-top-width: 60px;
            border-bottom-width: 60px;
        }
        /*   手机听筒    */
        .smartphone:before {
            content: '';
            display: block;
            width: 60px;
            height: 5px;
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #333;
            border-radius: 10px;
        }
        /*    手机 home 键    */
        .smartphone:after {
            content: '';
            display: block;
            width: 35px;
            height: 35px;
            position: absolute;
            left: 50%;
            bottom: -65px;
            transform: translate(-50%, -50%);
            background: #333;
            border-radius: 50%;
        }
        /* The screen (or content) of the device */
        .smartphone .content {
            width: 360px;
            height: 640px;
            background: greenyellow;
        }

    </xmp>



    <div class="smartphone">
        <div class="content">
            <iframe src="https://m.jd.com/" style="width:100%;border:none;height:100%" >
        </div>
    </div>






  

    <br><br><br><br><br><br><br>

</body>
</html>